import 'package:flutter/material.dart';
// 1. 首先引入 flutter主题

// 2. 调用入口方法runApp

// 2.1 简单测一个组件

/*
void main() {
  // 在runApp里调用flutter组件或者自定义组件 这里调用的是flutter组件 Center  在child属性里进行布局
  runApp(const Center(
    // Text组件 的属性 textDirection 文字的排列 r
    // 属性值 ltr 从左向右  rtl
    child: Text(
      '第一个flutter app',
      textDirection: TextDirection.ltr,
      style: TextStyle(
        // color: Colors.red
        color: Color.fromRGBO(232, 255, 218, 1) 
      ),
    ),
  ));
}
*/

// 2.2  MaterialApp Scaffold
/* 
MaterialApp是一个方便的Widget，它封装了应用程序实现Material Design所需要的一些Widget。一般作为根组件使用。
常用的属性：
- home（主页）
- title（标题）
- color（颜色）
- theme（主题）
- routes（路由）

Scaffold是Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。
- appBar - 显示在界面顶部的一个 AppBar。
- body - 当前界面所显示的主要内容 Widget。
- drawer - 抽屉菜单控件。
*/

/* 
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('你好 flutter'),
      ),
      body: const Center(
        child: Text(
          '第一个flutter app',
          textDirection: TextDirection.ltr,
          style: TextStyle(color: Color.fromRGBO(33, 53, 20, 1)),
        ),
      ),
    ),
  ));
} 
*/


/* 
2.3 自定义组件
在Flutter中自定义组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget
前期我们都继承StatelessWidget。后期给大家讲StatefulWidget的使用。

StatelessWidget 是无状态组件，状态不可变的widget

StatefulWidget 是有状态组件，持有的状态可能在widget生命周期改变
*/
void main() {
   runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('你好 flutter'),
      ),
      body: MyApp(),
    ),
  ));
}



class MyApp extends StatelessWidget {
  @override
  // 抽象类
  Widget build(BuildContext context) {
    return const Center(
      child: Text(
        "我是自定义组件的文本内容",
        textDirection: TextDirection.ltr,
      ),
    );
  }
}

